import React, { useState } from "react";
import { Calendar, MessageSquare, Edit2, Trash2, ChevronDown, ChevronUp } from "lucide-react";
import { MoodEmoji } from "./MoodEmoji";
import type { Mood } from "@/services/mood.service";

interface MoodCardProps {
  mood: Mood;
  onEdit: (mood: Mood) => void;
  onDelete: (id: string) => void;
}

export function MoodCard({ mood, onEdit, onDelete }: MoodCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const shouldShowExpand = mood.remark && mood.remark.length > 150;

  return (
    <div className="bg-card rounded-xl shadow-lg">
      <div className="p-4 border-b flex justify-between items-start">
        <MoodEmoji level={mood.mood.level} />
        <div className="flex gap-2">
          <button
            onClick={() => onEdit(mood)}
            className="p-2 hover:bg-accent rounded-lg transition-colors"
          >
            <Edit2 className="w-4 h-4" />
          </button>
          <button
            onClick={() => onDelete(mood._id)}
            className="p-2 hover:bg-destructive/10 rounded-lg transition-colors text-destructive"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      </div>
      <div className="p-4 space-y-4">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Calendar className="w-4 h-4 flex-shrink-0" />
          <span>{new Date(mood.createdAt).toLocaleString()}</span>
        </div>
        {mood.remark && (
          <div className="space-y-2">
            <div className="flex items-start gap-2">
              <MessageSquare className="w-4 h-4 mt-1 flex-shrink-0" />
              <div className="flex-1 min-w-0">
                <div 
                  className={`text-sm text-muted-foreground whitespace-pre-wrap break-words ${
                    !isExpanded && shouldShowExpand ? 'line-clamp-3' : ''
                  }`}
                >
                  {mood.remark}
                </div>
              </div>
            </div>
            {shouldShowExpand && (
              <button
                onClick={() => setIsExpanded(!isExpanded)}
                className="w-full mt-2 py-2 flex items-center justify-center gap-1 text-sm text-primary hover:text-primary/80 hover:bg-primary/5 rounded-lg transition-colors"
              >
                {isExpanded ? (
                  <>
                    收起内容 <ChevronUp className="w-4 h-4" />
                  </>
                ) : (
                  <>
                    展开内容 <ChevronDown className="w-4 h-4" />
                  </>
                )}
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}
